<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-3 flex v-align-c">
      <span></span>
      <i>按钮组</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">按钮设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box near-box">
          <h4>选择模版</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.templateStyle" label="10">图文导航</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.templateStyle" label="11">文字导航</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box" v-if="details.propMap.templateStyle === '10'">
          <h4>样式风格</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.buttonStyle" label="10">圆形</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.buttonStyle" label="11">圆角</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.buttonStyle" label="12">正方形</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box">
          <h4>每页行数</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.pageNum" label="1" @change="btnTotalChange">1行</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.pageNum" label="2" @change="btnTotalChange">2行</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>每行数量</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.rowNum" label="3" @change="btnTotalChange">3个</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.rowNum" label="4" @change="btnTotalChange">4个</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.rowNum" label="5" @change="btnTotalChange">5个</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">内容样式</h3>
        </div>
        <div class="border-box near-box">
          <h4>背景</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.backgroundColor" 
                  @active-change="activecolorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.backgroundColor" @change="iptColorChange(details, 'backgroundColor', '#FFFFFF', $event)">
                  <!-- <template slot="prepend">#</template> -->
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>文字</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker
                  v-model="details.propMap.fontColor"
                  @active-change="activecolorChange(details, 'fontColor', '#333333', $event)"
                  @change="colorChange(details, 'fontColor', '#333333', $event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.fontColor" @change="iptColorChange(details, 'fontColor', '#333333', $event)">
                  <!-- <template slot="prepend">#</template> -->
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'fontColor', '#333333')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>边距</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="v-align-c font-12">
                <span>上下</span>
                <el-slider v-model="details.propMap.verticalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.verticalMargin" @input="marginChange(details, 'verticalMargin',  $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="v-align-c font-12">
                <span>左右</span>
                <el-slider v-model="details.propMap.horizontalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.horizontalMargin" @input="marginChange(details, 'horizontalMargin', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="v-align-c font-12">
                <span>圆角</span>
                <el-slider v-model="details.propMap.radius" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.radius" @input="marginChange(details, 'radius', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 pad-b-15" :class="details.propMap.templateStyle === '10' ? 'mar-t--28' : ''">
          <h3 class="pancel-s-title">按钮内容</h3>
        </div>
        <template v-if="details.buttonGroupList">
          <draggable id="content-box flex-item" v-model="details.buttonGroupList" dragable="true" :move="getdata" @update="datadragEnd">
            <div v-for="(item, index) in details.buttonGroupList" :key="'btns-list-' + index">
              <div class="drag-box">
                <div class="border-box btns-form flex v-align-c">
                  <img class="width-12 height-10 mar-r-20 mar-l--5" :src="iconDrag" alt="">
                  <div class="pad-t-5 pad-b-7 flex-item">
                    <el-form-item label="图片" label-width="42px" class="none-mar-b pad-b-10 uploads-bar" v-if="details.propMap.templateStyle === '10'">
                      <div class="height-60 mar-r-10">
                        <el-upload class="avatar-uploader"
                        action="/api/common/uploadFiles"
                        accept="image/jpeg,image/gif,image/png,image/bmp"
                        list-type="picture-card-ms"
                        :before-upload="beforeUpload" name="files"                    
                        :data="token" :show-file-list="false" :on-success="(res)=> handleUploadSuccess(res, index)">
                          <div v-if="item.imgUrl" class="default-p-pic">
                            <img :src="item.imgUrl" width="60px" height="60px">
                            <div class="default-p-t">重新上传</div>
                          </div>
                          <div v-else class="default-p-pic">
                            <div class="default-p-img"></div>
                            <div class="default-p-t">上传图片</div>
                          </div>
                        </el-upload>
                      </div>
                    </el-form-item>
                    <el-form-item label="文字" label-width="42px" class="none-mar-b pad-b-10 mar-t-3">
                      <el-input placeholder="最多5个字" class="mini-s-input" maxlength="5" v-model="item.buttonName"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色" label-width="42px" class="none-mar-b mar-t--1" v-if="false">
                      <el-color-picker v-model="item.buttonColor" class="color-sel"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="链接" label-width="42px" class="none-mar-b pad-b-10 mar-t--4">
                      <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                        @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                    </el-form-item>
                  </div>
                </div>
                <div class="btn-edit-del selected">
                  <div class="btn-del" @click="remove(item)">删除</div>
                </div>
              </div>
            </div>
          </draggable>
          <div class="add-border-box" v-if="details.buttonGroupList.length < 20" @click="addBorderBox">
            <span>+</span>
            <span>添加</span>
            <span>{{details.buttonGroupList.length}}/20</span>
          </div>
        </template>
      </el-form>
    </div>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-if="appType !== 13" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
      <div slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setLink">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import draggable from 'vuedraggable'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          buttonGroupList: [],
          btnGroup: []
        },
        predefineColors: [],
        fullScreenLoading: null,
        // 定义链接选择器基础数据开始
        linkSetVisible: false,
        link: {},
        iconDrag,
        linkTemp: {}
        // 定义链接选择器基础数据结束
      }
    },
    // 初始化页面
    created() {
      this.details = this.details1
      this.$set(this.details.propMap, 'verticalMargin', this.details.propMap.verticalMargin ? this.details.propMap.verticalMargin * 1 : 0)
      this.$set(this.details.propMap, 'horizontalMargin', this.details.propMap.horizontalMargin ? this.details.propMap.horizontalMargin * 1 : 0)
      this.$set(this.details.propMap, 'radius', this.details.propMap.radius ? this.details.propMap.radius * 1 : 0)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsBtns', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'verticalMargin', details.propMap.verticalMargin ? details.propMap.verticalMargin * 1 : 0)
        that.$set(that.details.propMap, 'horizontalMargin', details.propMap.horizontalMargin ? details.propMap.horizontalMargin * 1 : 0)
        that.$set(that.details.propMap, 'radius', details.propMap.radius ? details.propMap.radius * 1 : 0)
      })
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.buttonGroupList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.buttonGroupList = filters
        this.btnTotalChange()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file, item) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.details.buttonGroupList[index].imgUrl = res.data[0]
          this.$bus.$emit('resetDetailsBtns', this.details)
          this.btnTotalChange()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      btnTotalChange() {
        this.details.btnGroup = []
        const btnGroup = []
        const length = this.details.buttonGroupList.length
        const pageNum = this.details.propMap.pageNum * 1 || 2
        const rowNum = this.details.propMap.rowNum * 1
        let arr2 = []
        let arr3 = []
        let count = 1
        for (let i = 0; i < length; i++) {
          arr3.push(this.details.buttonGroupList[i])
          if (arr3.length === rowNum || (i + 1 === length)) {
            arr2.push(arr3)
            arr3 = []
          }
          if ((i + 1 === rowNum * pageNum * count) || (i + 1 === length)) {
            btnGroup.push(arr2)
            count++
            arr2 = []
          }
        }
        this.$delete(this.details, 'btnGroup')
        this.$set(this.details, 'btnGroup', btnGroup)
      },
      addBorderBox() {
        if (this.details.buttonGroupList.length < 20) {
          this.details.buttonGroupList.push({
            buttonId: '',
            imgUrl: '',
            buttonName: '',
            buttonColor: '',
            linkType: '',
            linkParams: ''
          })
          this.btnTotalChange()
        }
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.linkTemp, item)
        this.setLink()
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          buttonGroupList: []
        }
      },
      remove(item) {
        const index = this.details.buttonGroupList.findIndex(btn => btn.buttonId === item.buttonId)
        this.details.buttonGroupList.splice(index, 1)
        this.btnTotalChange()
        // const buttonGroupList = this.details.buttonGroupList
        // this.$delete(this.details, 'buttonGroupList')
        // this.$set(this.details, 'buttonGroupList', buttonGroupList)
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      }
    }
  }
</script>
<style lang="less" scoped>
.drag-box{
  position: relative;
  .border-box{
    margin-bottom: 15px;
  }
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
    background-size: 16px 16px;
  }
}
</style>
